<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../chapter2/js/three.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			div#canvas {
				border: none;
				cursor: pointer;
				width: 100%;
				height: 600px;
				background-color: #EEEEEE;
			}
		</style>
		<script type="text/javascript">
			var renderer,camera,scene,light,cube;//渲染器、摄像机、场景、光源、物体
            function initRenderer() {
                width = document.getElementById('canvas').clientWidth;
                height = document.getElementById('canvas').clientHeight;
                renderer = new THREE.WebGLRenderer({
                    antialias : true//抗锯齿
                });
                renderer.setSize(width, height);
                document.getElementById('canvas').appendChild(renderer.domElement);
                renderer.setClearColor(0xFFFFFF, 1.0);
            }
            function initCamera() {
                camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);//视角大小，长宽比，最近，最远
                camera.position.x = 1000;//camera.position用来设定摄像机的位置
                camera.position.y = 1000;
                camera.position.z = 1000;
                camera.up.x = 0;//camera.up用来设定哪个方向是摄像机的上方
                camera.up.y = 0;
                camera.up.z = 1;
                camera.lookAt({//camera.lookAt用来设定摄像机的朝向的位置
                    x : 300,
                    y : 0,
                    z : 0
                });
            }
            function initScene() {
                scene = new THREE.Scene();
            }
            function initLight() {
                light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);//方向光
                light.position.set(100, 100, 200);
                scene.add(light);
            }
            var p1,p2,line;
            function initLineFollowMouse() {//创建一条直线
                var geometry = new THREE.Geometry();//创建物体的几何体
                var material = new THREE.LineBasicMaterial( { vertexColors: true } );//创建直线的材质
                var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 );//创建颜色

                // 线的材质可以由2点的颜色决定
                p1 = new THREE.Vector3( 0, 0, 0 );//创建点
                p2 = new THREE.Vector3(  100, 0, -100 );
                var p3=camera.position;
                console.log(p3);
                geometry.vertices.push(p3);//添加点
                geometry.vertices.push(p2);
                geometry.colors.push( color1, color2 );

                line = new THREE.Line( geometry, material, THREE.LineSegments );//创建直线
                scene.add(line);
                renderer.domElement.addEventListener("click",mousemove);
            }
            var mouse = new THREE.Vector2();
            function mousemove(event){
            	event.preventDefault();
			    
				mouse.x = ( event.offsetX / renderer.domElement.width ) * 2 - 1;
				mouse.y = - ( event.offsetY / renderer.domElement.height ) * 2 + 1;
				var vector = new THREE.Vector3( mouse.x, mouse.y, 1 ).unproject( camera );
				console.log(vector);

				p2.x=vector.x;
				p2.y=vector.y;
				p2.z=vector.z;
				line.geometry.verticesNeedUpdate=true;
            }
            function initBox(){//创建一个盒子状的物体
            	var geometry = new THREE.BoxGeometry( 400, 200, 100 );
    
			    for ( var i = 0; i < geometry.faces.length; i += 2 ) {
			        var hex = Math.random() * 0xffffff;
			        geometry.faces[ i ].color.setHex( hex );
			        geometry.faces[ i + 1 ].color.setHex( hex );
			    }
			    
			    var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors} );
			    mesh = new THREE.Mesh( geometry,material);//mesh指网格、多个三角形和四边形组合成的图形
			    mesh.position = new THREE.Vector3(500,50,50);
			    scene.add(mesh);
            }
            function initGrid(){//创建网格
			    // 网格的边长是1000，每个小网格的边长是50
			    var grid = new THREE.GridHelper( 1000, 50 );
			    grid.setColors( 0x0000ff, 0x808080 );
			    scene.add(grid);
			}
            function animation(){//动画，旋转
//			    mesh.rotateY(0.01);
			    renderer.render(scene, camera);
			    requestAnimationFrame(animation);
			}
			function initAll(){
				initRenderer();
				initCamera();
				initScene();
				initLight();
				initLineFollowMouse();
				initBox();
				initGrid();
				renderer.clear();
//				renderer.render(scene, camera);
                animation();
			}
			
		</script>
	</head>
	<body onload="initAll();">
		<div id="canvas"></div>
	</body>
</html>
